@charset "UTF-8";

// Background
// Usage: @include bg-gradient-t2b(#fff, #000);
//        @include bg-gradient-l2r(#fff, #000);
//        @include bg-radial(#fff, 0%, #000, 100%);
// --------------------------------------------------

// Background Gradient: Top to Bottom
@mixin bg-gradient-t2b($start-colour, $end-colour) {
    background-color: $start-colour;
    background-image: -webkit-gradient(linear, left top, left bottom, from($start-colour), to($end-colour));
    background-image: -webkit-linear-gradient(top, $start-colour, $end-colour);
    background-image:    -moz-linear-gradient(top, $start-colour, $end-colour);
    background-image:     -ms-linear-gradient(top, $start-colour, $end-colour);
    background-image:      -o-linear-gradient(top, $start-colour, $end-colour);
    background-image:         linear-gradient(top, $start-colour, $end-colour);
    filter:            progid:DXImageTransform.Microsoft.gradient(start-colourStr='#{$start-colour}', end-colourStr='#{$end-colour}');
}

// Background Gradient: Left to Right
@mixin bg-gradient-l2r($start-colour, $end-colour) {
    background-color: $start-colour;
    background-image: -webkit-gradient(linear, left top, right top, from($start-colour), to($end-colour));
    background-image: -webkit-linear-gradient(left, $start-colour, $end-colour);
    background-image:    -moz-linear-gradient(left, $start-colour, $end-colour);
    background-image:     -ms-linear-gradient(left, $start-colour, $end-colour);
    background-image:      -o-linear-gradient(left, $start-colour, $end-colour);
    background-image:         linear-gradient(left, $start-colour, $end-colour);
    filter:            progid:DXImageTransform.Microsoft.gradient(start-colourStr='#{$start-colour}', end-colourStr='#{$end-colour}', gradientType='1');
}

// Background Gradient: Radial
@mixin bg-radial($start-colour, $start-position, $end-colour, $end-position) {
    background: -moz-radial-gradient(center, ellipse cover, $start-colour $start-position, $end-colour $end-position);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, Colour-stop($start-position,$start-colour), Colour-stop($end-position,$end-colour));
    background: -webkit-radial-gradient(center, ellipse cover, $start-colour $start-position,$end-colour $end-position);
    background: -o-radial-gradient(center, ellipse cover, $start-colour $start-position,$end-colour $end-position);
    background: -ms-radial-gradient(center, ellipse cover, $start-colour $start-position,$end-colour $end-position);
    background: radial-gradient(ellipse at center, $start-colour $start-position,$end-colour $end-position);
}
